<template>
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profiles.image" class="user-img" />
            <h4>{{ profiles.username }}</h4>
            <p>
              {{ profiles.bio }}
            </p>
            <template v-if="profiles.username === user.username">
              <button
                class="btn btn-sm btn-outline-secondary action-btn"
                @click="onEditSelf"
              >
                <i class="ion-gear-a"></i>
                Edit Profile Settings
              </button>
            </template>
            <template v-else>
              <button
                class="btn btn-sm btn-outline-secondary action-btn"
                :disabled="profiles.followingDisabled"
                @click="onFollow(profiles)"
              >
                <i class="ion-plus-round"></i>
                &nbsp;{{ profiles.following ? "Unfollow" : "Follow" }}
                {{ profiles.username }}
              </button>
            </template>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <ArticleList
            :articles="articles"
            :page="page"
            :totalPage="totalPage"
            :tab="tab"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getProfiles, addFollow, deleteFollow } from "@/api/profiles";
import { getArticles } from "@/api/article";
import ArticleList from "../../components/articles-list.vue";
import { mapState } from "vuex";

export default {
  middleware: "authenticated",
  name: "profilePage",
  async asyncData({ query, params }) {
    const page = Number.parseInt(query.page || 1);
    const limit = 20;
    const author = params.username || "";
    const favorited = params.username || "";
    const tab = query.tab || "my_articles";
    let queryparams;
    tab === "my_articles"
      ? (queryparams = {
          author,
          page,
          limit,
        })
      : (queryparams = {
          favorited,
          page,
          limit,
        });

    const [profilesRes, articleRes] = await Promise.all([
      getProfiles(params.username),
      getArticles(queryparams),
    ]);
    console.log(profiles, articleRes);
    const { articles, articlesCount } = articleRes.data;
    const profiles = profilesRes.data.profile;
    profiles.followingDisabled = false;
    console.log(articles, articlesCount);
    return {
      profiles,
      articles,
      page,
      tab,
      articlesCount,
      limit,
    };
  },
  methods: {
    async onFollow(profiles) {
      profiles.followingDisabled = true;
      if (profiles.following) {
        // 取消点赞
        await deleteFollow(profiles.username);
        profiles.following = false;
      } else {
        // 添加点赞
        await addFollow(profiles.slug);
        profiles.following = true;
      }
      profiles.followingDisabled = false;
    },
    onEditSelf() {
      this.$router.push({
        name: "settings",
      });
    },
  },
  watchQuery: ["page", "tab"],

  computed: {
    ...mapState(["user"]),
    totalPage() {
      return Math.ceil(this.articlesCount / this.limit);
    },
  },
  components: {
    ArticleList,
  },
};
</script>
<style></style>
